<template>
    <div class="fileLine">
        <div style="width: 120px;text-align:right" v-if="title">{{title}}</div>
        <el-upload :disabled="readonly" :multiple="true" style="margin-left:10px;" :action="uploadURL + '/file/imgUpload'" :on-preview="handlePreview"
            :on-remove="handleRemove" :on-success="uploadSuccess" :file-list="fileList" :list-type="isFile? 'text': 'picture-card'">
            <el-button :disabled="readonly" size="small" type="primary" >点击上传</el-button>
            <div v-if="!isFile" slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>

<script>
export default {
    props: {
        readonly: {
            type: Boolean,
            default: false
        },
        field: {
            type: String,
            default: ""
        },
        required: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        },
        value: {
            type: String,
            default: ""
        },
        isFile: {
            //是否附件
            type: Boolean,
            default: false
        },
        readonly: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            uploadURL: process.env.VUE_APP_API_URL,
            fileList: []
        };
    },
    watch: {
        value: {
            handler(nv, ov) {
                if (nv) {
                    this.fileList.splice(0, 1);
                    this.fileList.push({name: nv, url: nv});
                } else if (nv == "") {
                    this.fileList.splice(0, 1);
                }
            },
            immediate: true
        }
    },
    methods: {
        uploadSuccess(resp, file, fileList) {
            
            this.$emit("input", resp.data.url);
            this.$emit("upSuccess", file);
        },
        handleRemove(file, fileList) {
            this.$emit("input", "");
            this.fileList.splice(0);
        },
        handlePreview(file) {
            console.log(file);
        }
    }
}
</script>

<style lang="scss" scoped>
.fileLine {
    display: flex;

}
</style>